import React from 'react'
import { Routes, Route, Link, NavLink, useRoutes } from 'react-router-dom'
import routes from './routes/routes'
// import Home from './pages/Home'
// import About from './pages/About'
// import A from './pages/A'
// import B from './pages/B'
export default function App() {
  return (
    <div>
      <NavLink
        to="/home"
        className={({ isActive }) => {
          console.log('首页', isActive)
          return isActive ? 'xxx-abc' : ''
        }}
        style={({ isActive }) => {
          return isActive ? { color: 'hotpink' } : {}
        }}
        // 加了这个end.则home下面的二级导航高亮了,则一级导航就不会在高亮了
        end
      >
        首页
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => {
          console.log('关于', isActive)
          return isActive ? 'xxx-abc' : ''
        }}
        style={({ isActive }) => {
          return isActive ? { color: 'hotpink' } : {}
        }}
        // 添加了replace则修改路径时为替换历史记录. 默认是添加历史记录
        // replace
      >
        关于
      </NavLink>
      <hr />
      {/* 注意: 前端路由规则配置代码写在哪里,未来要切换的视图就渲染在哪里 */}
      {useRoutes(routes)}

      <hr />
    </div>
  )
}
